<template>
    <div ref="target" style="position: relative;">
        <div class="my_bookmark" @click="queryBookmarks">我的书签</div>
        <div v-if="showMarklist" class="marklist">
            <div class="mark_item" v-for="(item, index) in bookmarks" :key="index">
                <span class="bookmark_name" @click="gotoBookmark(item)">{{ item['Name'] }}</span>
                <span v-if="item['UserID']" class="bookmark_del" @click="deleteBookmark(item['ID'])">删除</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { getBookmarks, delBookmark } from '@/api/base';
import { onClickOutside } from "@vueuse/core";
import { useStore } from '@/stores';

const { proxy } = getCurrentInstance();
const store = useStore();
const route = useRoute();
const bus = proxy.$bus;

const target = ref();
const bookmarks = ref([]);
const bookmarkmap = ref({});
const showMarklist = ref(false);

onMounted(() => {

});
onClickOutside(target, () => {
    // 在组件范围之外点击，关闭显示下拉框
    showMarklist.value = false;
})
const queryBookmarks = async () => {

    const uid = route.query.uid;
    if (uid) {
        showMarklist.value = true;
        let res = await getBookmarks(store.village, uid);
        bookmarks.value = res;
    } else {
        proxy.$toast("没有获取到uid", 2);
    }
}
const gotoBookmark = (bookmark) => {
    bus.emit("setCameraInfo", bookmark);
}
const deleteBookmark = async (id) => {
    await delBookmark(id);
    queryBookmarks();
}
</script>
<style scoped lang="scss">
.my_bookmark {
    padding: 5px 10px;
    font-size: 38px;
    color: #fff;
    cursor: pointer;
    background-image: url("../assets/images/header/nav_active_bg.png");
    background-size: 100% 100%;
}

.marklist {
    width: 400px;
    height: 600px;
    // background-color: red;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), rgba(12, 111, 111, 0.8);
    position: absolute;
    top: 100%;
    border-radius: 10px;
    overflow-y: auto;
    z-index: 99999;

    .mark_item {
        padding: 15px 30px;
        color: #fff;
        border-bottom: 2px solid rgba(0, 0, 0, 0.7);
        font-size: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &:hover {
            opacity: 0.7;
        }

        .bookmark_name {
            flex: 1;
            margin-right: 10px;
        }

        .bookmark_del {
            font-size: 26px;
        }
    }
}
</style>